<template>
  <div
    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
  >
    <h1 class="h2">{{ title }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group me-2">
        <router-link class="btn btn-sm btn-outline-secondary" :to="{ name: routeName }">
          新增
        </router-link>
      </div>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
        <tr>
          <th>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" v-model="all" />
            </div>
          </th>
          <slot name="thead"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item of data" :key="item.id">
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" :value="item.id" v-model="items" />
            </div>
          </td>
          <slot name="tbody" :item="item"></slot>
          <td>
            <router-link :to="{ name: routeName, query: { id: item.id } }"> 编辑 </router-link>
            /
            <a href="#" @click.prevent="onDelete(item)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <button type="button" class="btn btn-sm btn-danger me-2" @click="onDeleteBatch">
            批量删除
          </button>
        </div>
        <div class="col">
          <ul class="pagination pagination-sm justify-content-end">
            <li class="page-item">
              <a class="page-link" href="#" @click.prevent="onPage(page - 1)">上一页</a>
            </li>
            <li :class="['page-item', { active: n === page }]" v-for="n of pages" :key="n">
              <a class="page-link" href="#" @click.prevent="onPage(n)">{{ n }}</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" @click.prevent="onPage(page + 1)">下一页</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  routeName: String,
  data: {
    type: Array,
    default: () => []
  },
  total: Number,
  page: Number,
  limit: Number
})

const emit = defineEmits(['pull', 'onDelete', 'onDeleteBatch', 'onPage'])

const items = ref([])
const all = computed({
  get() {
    const result = props.data.filter((r) => !items.value.includes(r.id))
    return result.length === 0
  },
  set(value) {
    items.value = value ? props.data.value.map((r) => r.id) : []
  }
})

const pages = computed(() => {
  return Math.ceil(props.total / props.limit)
})

const pull = () => {
  emit('pull')
}

const onDelete = async (row) => {
  emit('onDelete', row)
}

const onDeleteBatch = async () => {
  emit('onDeleteBatch', items.value)
}

const onPage = (n) => {
  if (n < 1) {
    n = 1
  } else if (n > pages.value) {
    n = pages.value
  }
  if (props.page === n) {
    return
  }
  emit('onPage', n)
}

watchEffect(pull)
</script>

<style lang="scss" scoped></style>
